<template>
  <div class="bar-setting">
      <el-form ref="barSetting" :model="setting" label-position="top"  style="height:auto;">
        <el-form-item :label="$t('custom.component.gadget.litikuymeasure')">
          <el-select v-model="setting.litikuymeasure" :placeholder="$t('custom.component.gadget.placeholder')" style="width:80%;">
            <el-option v-for="(item,index) in dataSourceColumns" :key="index"  :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.litikufenzu')">
          <el-select v-model="setting.litikufenzu" :placeholder="$t('custom.component.gadget.placeholder')" style="width:80%;">
            <el-option v-for="(item,index) in dataSourceColumns" :key="index"  :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.litikuydimension')">
          <el-select v-model="setting.litikuxdimension" :placeholder="$t('custom.component.gadget.placeholder')" style="width:80%;">
            <el-option v-for="(item,index) in dataSourceColumns" :key="index"  :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('custom.component.gadget.litikuxdimension')">
          <el-select v-model="setting.litikuydimension" :placeholder="$t('custom.component.gadget.placeholder')" style="width:80%;">
            <el-option v-for="(item,index) in dataSourceColumns" :key="index"  :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import Index from '../../dashboard-filter/index.vue'
export default {
  name: 'LitikuSetting',
  components: { Index },
  data () {
    return {
      dataSource: [],
      dataSourceColumns: [],
      // typeList: ['StackingColumn', 'Column', 'Bar'],
      setting: {
        litikuymeasure:'',
        litikufenzu:'',
        litikuxdimension:'',
        litikuydimension:'',
      },
      predefineColors: [
        '#ffebe6',
        '#fffae6',
        '#e3fcef',
        '#e6fcff',
        '#deebff',
        '#eae6ff',
        '#ff0000',
        '#ffff00',
        '#008000'
      ],
      trendLineList: ['linear', 'exponential', 'polynomial']

    }
  },
  props: [
    'data', 'fieldsList'
  ],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    },
    fieldsList (val) {
      let temp = []
      this.dataSourceColumns = []
      val.forEach(item => {
        temp.push(item.name)
      })
      this.dataSourceColumns = temp
    },
    'setting.valueFieldsNameManyY' (val, oldVal) {
      if (val.length > oldVal.length) {
        this.setting.color.push('#5470c6')
      } else {
        this.setting.color.pop()
      }
    },
    'setting.valueFieldsNameMeasureGroup' (val) {
      if (val) {
        this.setting.showTrendLine = ''
      }
    },
    'setting.manyMeasure' (val) {
      if (val) {
        this.setting.showTrendLine = ''
      }
    }
  },
  computed: {
    typeList () {
      let temp = []
      if (this.setting.valueFieldsNameMeasureGroup) {
        temp = ['StackingColumn', 'Column']
      } else {
        temp = ['StackingColumn', 'Column', 'Bar']
      }
      return temp
    }
  },
  created () {
    if (this.data) {
      this.$set(this.data)
    }
  },
  methods: {
    changeRightYaxis () {
      this.setting.YaxisRightLabel = ''
      this.setting.yAxismax = 1
      this.setting.yAxismin = 0
      this.setting.useRightyAxis = []
      this.setting.rightyAxisPercentage = false
    },
    groupChange (val) {
      if (val) {
        this.setting.valueFieldsNameManyY = []
        this.setting.manyMeasure = false
        this.setting.valueFieldsNameMeasureGroup = val
      } else {
        this.setting.valueFieldsNameMeasureGroup = null
      }
      this.$forceUpdate()
    },
    changeManyMeasure (val) {
      if (val) {
        this.setting.valueFieldsNameMeasureY = ''
        this.setting.valueFieldsNameManyY = []
      } else {
        this.setting.valueFieldsNameManyY = []
      }
      this.$forceUpdate()
    },
    getData () {
      return this.setting
    },
    updateSetting (value, list, layerStatus) {
      // let temp = []
      /// this.dataSourceColumns = []
      this._.merge(this.setting, value.gadgetSetting)
      if (!this.setting.manyMeasure) {
        if (this.setting.valueFieldsNameManyY && this.setting.valueFieldsNameManyY.length > 0) {
          this.setting.manyMeasure = true
        } else {
          this.setting.manyMeasure = false
        }
      }
      // list.forEach(item => {
      //  temp.push(item.name)
      // })
      // this.dataSourceColumns = temp
      this.$emit('update:data', this.setting)
    }

  }
}
</script>

<style lang="scss">
.bar-setting {

}

</style>
